<template>
    <page-container bgColor="#f4f4f4">
        <view slot="header">
            <cu-custom :isBack="true" bgColor="bg-white">
                <block slot="content">核销详情</block>
            </cu-custom>
        </view>
        <view slot="center" class="order-info-box" v-if="infoObj != null">
            <view class="order-status-item">
                <view class="list-top">
                    <view class="shop-icon">
                        <image :src="staticImgUrl + 'chat/shop.png'" mode=""></image>
                    </view>
                    <view class="shop-name">{{ infoObj.site_name }}</view>
                </view>
                <view class="item-info-box" v-for="(item, index) in infoObj.item_array" :key="index">
                    <view class="item-imgs">
                        <image :src="item.img" mode=""></image>
                    </view>
                    <view class="item-info-text">
                        <view class="info-details-text">
                            <view class="text-title">{{ item.name }}</view>
                            <view style="padding-left: 46rpx;">
                                <view class="info-price">￥{{ (Number(item.price) * item.num).toFixed(2) }}</view>
                                <view class="info-price-num">X{{ item.num }}</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="fgx"></view>
                <view class="inform-content-text">
                    <view class="content-text-info" v-for="(item,index) in infoObj.remark_array" :key="index">{{item.title}}：{{ item.value }}</view>
                    <view class="content-text-info">核销类型：{{infoObj.verify_type_name}}</view>
                    <view class="content-text-info">核销状态：{{infoObj.is_verify==1? '已核销':'待核销'}}</view>
                    <view class="content-text-info">核销人员：{{infoObj.verifier_name}}</view>
                    <view class="content-text-info">核销时间：{{$Utils.formatDate(infoObj.verify_time*1000)}}</view>
                </view>
            </view>
        </view>
    </page-container>
</template>

<script>
export default {
	name: 'Platform',
	data() {
		return {
			codenumber: '',
			infoObj: null,
			pagesLen: ''
		}
	},
	onLoad(e) {
		this.getverifyInfo()
	},
	onShow(e) { },
	methods: {
		getverifyInfo(codenumber) {
			let optios = this.$util.queryObj()
			this.$request.verifyVerifyInfo({
				verify_code: optios.codenumber
			}).then(res => {
				// console.log(res);
				this.infoObj = res.data
			})

		}
	},
	mounted() { }
}
</script>

<style lang="scss" scoped>
image {
    width: 100%;
    height: 100%;
}

.order-info-box {
    .order-status {
        padding: 50rpx 0;

        .status-icon {
            width: 40rpx;
            height: 40rpx;
        }

        .order-status-name {
            margin-left: 20rpx;
            font-size: 36rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
        }
    }

    .order-status-item {
        width: 702rpx;
        height: auto;
        background: #ffffff;
        border-radius: 16rpx;
        margin: 30rpx auto 0 auto;
        padding-bottom: 8rpx;
    }

    .title-item {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #222222;
        padding-left: 20rpx;
        padding-top: 30rpx;
        padding-bottom: 30rpx;
    }

    .item-info-box {
        margin: 0 auto;
        width: 94%;
        display: flex;
        justify-content: flex-start;

        .item-imgs {
            width: 140rpx;
            height: 140rpx;
            background: #f4f4f4;
            border-radius: 16rpx;
        }

        .item-imgs image {
            border-radius: 16rpx;
        }

        .item-info-text {
            .info-details-text {
                display: flex;
                padding-left: 30rpx;

                .text-title {
                    width: 335rpx;
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #000000;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 4; //需要控制的文本行数
                    overflow: hidden;
                }

                .info-price {
                    font-size: 28rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #000000;
                }

                .info-price-num {
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #999999;
                    float: right;
                }
            }
        }
    }

    .inform-content-text {
        padding-top: 35rpx;
        padding-left: 22rpx;
        padding-right: 22rpx;

        .content-text-info {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            margin-bottom: 35rpx;
        }
    }
}

.list-top {
    display: flex;
    justify-content: flex-start;
    padding: 20rpx;

    .shop-icon {
        width: 32rpx;
        height: 32rpx;
    }

    .shop-name {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #222222;
        padding-left: 10rpx;
        padding-right: 10rpx;
    }

    .right-icon {
        width: 14rpx;
        height: 24rpx;
    }
}

.fgx {
    width: 650rpx;
    height: 1rpx;
    background: #eeeeee;
    margin: 50rpx auto 0 auto;
}

.affirm {
    width: 380rpx;
    height: 80rpx;
    background: linear-gradient(90deg, #ff7044, #fd3b5c);
    border-radius: 40rpx;
    margin: 80rpx auto 0 auto;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: 80rpx;
}
</style>
